import Icon from '@/components/Icon';
import styles from './index.module.scss';
import { useNavigate } from 'react-router';
import { ReactElement } from 'react';
type IProps = {
  children?: string;
  extra?: ReactElement;
  onBack?: () => void;
}

const NavBar: React.FC<IProps> = ({ children, extra, onBack }) => {
  const navigate = useNavigate();
  const back = () => {
    if (onBack) {
      return onBack();
    } else {
      navigate(-1);
    }
  };

  return (
    <div className={styles.root}>
      <div className="main">
        {/* 后退按钮 */}
        <div className="left">
          <Icon type="iconfanhui" onClick={back} />
        </div>
        {/* 居中标题 */}
        <div className="title">{children}</div>
        {/* 右侧内容 */}
        <div className="right">{extra}</div>
      </div>
    </div>
  );
};

export default NavBar;
